<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      * {
          box-sizing: border-box;
      }

      .batman {
          background-color: #d7d9f2;
      }

      .flash {
          background-color: #ffe8d4;
      }

      caption {
          padding: 8px;
          caption-side: bottom;
      }

      table {
          border-collapse: collapse;
          border: 2px solid rgb(100, 100, 100);
          letter-spacing: 1px;
          font-family: sans-serif;
          font-size: .7rem;
      }

      td,
      th {
          border: 1px solid rgb(100, 100, 100);
          padding: 10px 10px;
      }

      td {
          text-align: center;
      }
  </style>
</head>
<body>
<table>
  <caption>Superheros and sidekicks</caption>
  <!--
    HTML 中的 表格列组（Column Group <colgroup>） 标签用来定义表中的【列】组成的数据。
    1. 可以直接使用 colgroup 来表示全部的列，使用span="number" 表示定义跨越的连续列数。如果不存在，则其默认值为1。  如 span="1" ：表示1列  4：表示连续4列
    2. 可以在 colgroup 下使用 col 定义列的数据，一个col表示一列。（<colgroup>中有一个或多个<col>元素，则不允许再使用span属性。）可以在col上使用 span

    用处：可以对列组成的单元格数据统一进行样式的定义如 背景色、width【width为0时，这意味着组中每列的宽度应为容纳列内容所需的最小宽度】等，而不用一个个去找到符合的单元格，再进行样式定义

      对 <col> 元素编写样式时特别有用的 CSS 属性和伪类：
      width 属性可用于控制列宽；
      :nth-child 伪类可用于针对特定单元格设置对齐方式；
      text-align 属性可用于按照某一个字符对齐所有单元格的内容，例如 '.'。
  -->
  <colgroup>
    <col> <!-- 第一列 -->
    <col span="2" class="batman">   <!-- 同时定义第二、三列 -->
    <col span="2" class="flash">  <!-- 同时定义第四、五列 -->
  </colgroup>
  <tr>
    <td> </td>
    <th scope="col">
      <!-- 可以在th、td 里使用标签包裹。用来控制宽度 -->
      <span style="width: 200px;display: block;word-break: break-all">
        BatmanBatmanBatmanBatmanBatmanBatmanBatmanBatmanBatmanBatmanBatmanBatmanBatmanBatmanBatmanBatmanBatmanBatmanBatmanBatmanBatmanBatmanBatmanBatmanBatmanBatmanBatmanBatmanBatmanBatmanBatmanBatman
      </span>
    </th>
    <th scope="col">RobinRobinRobinRobinRobinRobinRobinRobinRobinRobinRobinRobinRobinRobinRobinRobinRobinRobinRobinRobinRobinRobinRobinRobinRobinRobinRobinRobinRobinRobinRobinRobinRobinRobinRobinRobinRobinRobinRobinRobinRobinRobinRobinRobinRobinRobinRobinRobin</th>
    <th scope="col">The Flash</th>
    <th scope="col">Kid Flash</th>
  </tr>
  <tr>
    <th scope="row">Skill</th>
    <td>Smarts</td>
    <td>Dex, acrobat</td>
    <td>Super speed</td>
    <td>Super speed</td>
  </tr>
</table>
<br>
<br>
<p>Table with colgroup</p>
<table>
  <!-- 定义四列数据 -->
  <colgroup span="4" class="columns"></colgroup>
  <tr>
    <th>Countries</th>
    <th>Capitals</th>
    <th>Population</th>
    <th>Language</th>
  </tr>
  <tr>
    <td>USA</td>
    <td>Washington D.C.</td>
    <td>309 million</td>
    <td>English</td>
  </tr>
  <tr>
    <td>Sweden</td>
    <td>Stockholm</td>
    <td>9 million</td>
    <td>Swedish</td>
  </tr>
</table>
<br>
<br>
<p>Table with colgroup and col</p>
<table>
  <colgroup>
    <!-- 第一列 -->
    <col class="column1">
    <!-- 第二、三列 -->
    <col class="columns2plus3" span="2">
  </colgroup>
  <tr>
    <th>Lime</th>
    <th>Lemon</th>
    <th>Orange</th>
  </tr>
  <tr>
    <td>Green</td>
    <td>Yellow</td>
    <td>Orange</td>
  </tr>
</table>
</body>
</html>
